document.addEventListener('DOMContentLoaded', function() {
const carousel = document.querySelector('.carousel');
const images = document.querySelectorAll('.carousel img');
const leftBtn = document.querySelector('.carousel-btn.left');
const rightBtn = document.querySelector('.carousel-btn.right');
const carouselContainer = document.querySelector('.carousel-container');

let currentIndex = 0;
let intervalId;
const imageCount = images.length;

// Set initial position
updateCarousel();

// Start auto rotation
startAutoRotation();

// Button click handlers
leftBtn.addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + imageCount) % imageCount;
    updateCarousel();
    resetAutoRotation();
});

rightBtn.addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % imageCount;
    updateCarousel();
    resetAutoRotation();
});

// Pause on hover
carouselContainer.addEventListener('mouseenter', pauseAutoRotation);
carouselContainer.addEventListener('mouseleave', startAutoRotation);

function updateCarousel() {
    const offset = -currentIndex * 100;
    carousel.style.transform = `translateX(${offset}%)`;
}

function startAutoRotation() {
    intervalId = setInterval(() => {
        currentIndex = (currentIndex + 1) % imageCount;
        updateCarousel();
    }, 5000);
}

function pauseAutoRotation() {
    clearInterval(intervalId);
}

function resetAutoRotation() {
    pauseAutoRotation();
    startAutoRotation();
}
});